<template>
    <div class="container">
        <div class="source-container" @dragstart="dragstart">
            <div draggable="true" class="item" style="background-color: #969696;" />
            <div draggable="true" class="item" style="background-color: #a69696;" />
            <div draggable="true" class="item" style="background-color: #b69696;" />
            <div draggable="true" class="item" style="background-color: #c69696;" />
            <div draggable="true" class="item" style="background-color: #d69696;" />
            <div draggable="true" class="item" style="background-color: #e69696;" />
        </div>
        <div ref="targetContainer" class="target-container" @drop="drop" @dragover="dragover" />
    </div>
</template>

<script lang="ts">
export default { name: 'DragTest' }
</script>

<script lang="ts" setup>
import { getCurrentInstance, ComponentInternalInstance, reactive, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'

// const slots = useSlots()
// const attrs = useAttrs()
// const emits = defineEmits()
const { proxy }:any = getCurrentInstance() as ComponentInternalInstance

const state = reactive({

})

const drag:any = {
    el: null,
    xDiff: 0,
    yDiff: 0,
}

const dragstart = (e:any) => {
    drag.el = e.target
    drag.xDiff = e.offsetX
    drag.yDiff = e.offsetY
}

const dragover = (e:any) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'copy'
    console.log(e)
}

const targetContainer = ref()

const drop = (e:any) => {
    e.preventDefault()
    const { offsetLeft, offsetTop } = targetContainer.value

    // e.target.appendChild(drag.el)
    drag.el.style.position = 'absolute'
    // drag.el.style.left = `${e.clientX - offsetLeft - drag.xDiff}px`
    // drag.el.style.top = `${e.clientY - offsetTop - drag.yDiff}px`
    drag.el.style.left = `${e.clientX - drag.xDiff}px`
    drag.el.style.top = `${e.clientY - drag.yDiff}px`
}

// defineExpose({

// })
</script>
<style lang="scss" scoped>
.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    height: 100%;

    .source-container {
        position: relative;
        background-color: #d4d4d4;
    }

    .target-container {
        position: relative;
        background-color: #b3b3b3;
    }

    .item {
        z-index: 99999;
        width: 100px;
        height: 100px;
    }
}
</style>
